<template>
	<div class="header">
		<header-back-icon :backIconShow="backIconShow"></header-back-icon>
		<header-logo></header-logo>
		<header-list-icon :listIconShow="listIconShow"></header-list-icon>
	</div>
</template>

<script>
  import HeaderBackIcon from './BackIcon';
  import HeaderLogo from './Logo';
  import HeaderListIcon from './ListIcon';

	export default {
		name: 'Header',
		props: {
      backIconShow: {
      	type: Boolean,
      	default () {
      		return false;
      	}
      },
      listIconShow: {
      	type: Boolean,
      	default () {
      		return true;
      	}
      }
		},
		components: {
			HeaderBackIcon,
			HeaderLogo,
			HeaderListIcon
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: .44rem;
		background-color: #fff;
		border-bottom: 1px solid #ddd
	}
</style>